<template>
  <view class="icon-btn-container">
    <view
      :class="['icon-btn', { 'with-border': msgCount > 0 || !checkMode }]"
      @click="handleClick"
    >
      <!-- 使用 image 标签显示本地图片 -->
      <image :src="iconSrc" mode="aspectFill" style="width: 40px; height: 40px;" />
      <text class="icon-btn-name">{{ name }}</text>
    </view>
    
    <!-- 如果有消息数量，显示徽章 -->
    <view v-if="msgCount > 0" class="msg-count-badge">
      <text>{{ msgCount }}</text>
    </view>

    <!-- 如果启用了复选框模式，显示复选框 -->
    <u-checkbox
      v-if="checkMode"
      :value="checkValue"
      :label="name"
      @change="onCheckChanged"
      @update:value="updateCheckValue"
    />
    
    <!-- 如果启用了删除按钮模式，显示删除按钮 -->
    <view v-if="removeMode" class="remove-btn" @click="onRemove">
      <u-icon name="trash" size="30" color="red" />
    </view>
  </view>
</template>

<script>
export default {
  props: {
    iconName: {
      type: String,
      required: true,
    },
    name: {
      type: String,
      required: true,
    },
    function: {
      type: Function,
      default: null,
    },
    iconTransForm: {
      type: Object,
      default: null,
    },
    msgCount: {
      type: Number,
      default: 0,
    },
    checkMode: {
      type: Boolean,
      default: false,
    },
    checkValue: {
      type: Boolean,
      default: false,
    },
    onCheckChanged: {
      type: Function,
      default: null,
    },
    removeMode: {
      type: Boolean,
      default: false,
    },
    onRemove: {
      type: Function,
      default: null,
    },
  },
  computed: {
    iconStyle() {
      return this.iconTransForm ? { transform: this.iconTransForm } : {};
    },
    // 计算本地图片路径
    iconSrc() {
      // 假设项目中的图标保存在 static/icons 文件夹下
      return `/static/icons/${this.iconName}.png`; // 根据 iconName 来加载对应的图片
    }
  },
  methods: {
    handleClick() {
      if (this.function) {
        this.function();
      }
    },
    // 触发更新父组件中的 checkValue
    updateCheckValue(newValue) {
      this.$emit('update:checkValue', newValue); // 使用 update:checkValue 触发事件
    },
  },
};
</script>

<style scoped>
.icon-btn-container {
  position: relative;
  text-align: center;
  margin: 10px;
}

.icon-btn {
  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.icon-btn-name {
  font-size: 14px;
  color: #333;
  margin-top: 5px;
}

.with-border {
  border: 0px solid #e4e4e4;
  border-radius: 8px;
}

.msg-count-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: red;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}

.remove-btn {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px;
}
</style>
